<template>
	<view class="home-container">
		<CustomNav :nav-info="navInfo" />
		<view class="home-container-top">
			<view class="home-container-banner">
				<image style="width:100%" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/home/banner.png" mode="aspectFill"></image>
			</view>
			<view class="home-container-actions">
				<uni-grid :column="4" :show-border="false" :highlight="true">
					<uni-grid-item @click.native="go2Policy">
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="custom-icons" src="../../static/images/home/icon_policy.png" mode="aspectFill"></image>
							<text class="text">政策通知</text>
						</view>
					</uni-grid-item>
					<uni-grid-item @click.native="go2Talent">
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="custom-icons" src="../../static/images/home/icon_talent.png" mode="aspectFill"></image>
							<text class="text">人才招聘</text>
						</view>
					</uni-grid-item>
					<uni-grid-item @click.native="go2Activity">
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="custom-icons" src="../../static/images/home/icon_activity.png" mode="aspectFill"></image>
							<text class="text">精彩活动</text>
						</view>
					</uni-grid-item>
					<uni-grid-item @click.native="go2Apartment">
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="custom-icons" src="../../static/images/home/icon_rent.png" mode="aspectFill"></image>
							<text class="text">租房补贴</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="home-container-content">
			<view class="ds-card">
				<view class="header">
					<text class="title">公寓推荐</text>
					<text class="action" @click.native="go2Apartment">查看更多 ></text>
				</view>
				<view class="mt-20">
					<image style="width:100%" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/home/apartment1.png" mode="widthFix"></image>
					<image style="width:100%" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/home/apartment2.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="ds-card mt-20">
				<view class="header">
					<text class="title">最新职位</text>
					<text class="action" @click.native="go2Talent">查看更多 ></text>
				</view>
				<view>
					<scroll-view class="position-container mt-20" scroll-x="true" >
						<!-- <view class="position-container mt-20"> -->
							<view class="position">
								<view class="header">
									网络信息安全工程师
								</view>
								<view class="salary mt-20">
									8千-1.3万/月
								</view>
								<view class="tags mt-20">
									<uni-tag custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="1-2年" />
									<uni-tag style="margin-left: 12rpx;" custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="大学本科" />
									<uni-tag style="margin-left: 12rpx;" custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="无锡市" />
								</view>
								<view class="company mt-20 text-color">
									无锡市灵锡数字有限公司
								</view>
							</view>
							<view class="position ml-10">
								<view class="header">
									网络信息安全工程师
								</view>
								<view class="salary mt-20">
									8千-1.3万/月
								</view>
								<view class="tags mt-20">
									<uni-tag custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="1-2年" />
									<uni-tag style="margin-left: 12rpx;" custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="大学本科" />
									<uni-tag style="margin-left: 12rpx;" custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="无锡市" />
								</view>
								<view class="company mt-20 text-color">
									无锡市灵锡数字有限公司
								</view>
							</view>
						<!-- </view> -->
					</scroll-view>
					<view class="btn mt-20">
						<uni-icons type="person" color="#0051FF"></uni-icons>
						<text class="ml-10">我要求职 >></text>
					</view>
				</view>
			</view>
			<view class="no-border-card mt-20">
				<view class="header">
					<uv-tabs :current="currentTab" :itemStyle="{ fontSize: '68rpx', height: '50rpx', fontWeight:'bold' }" :scrollable="false" :list="tabs" @click="changeTab"></uv-tabs>
					<text class="action" @click="goNews">查看更多 ></text>
				</view>
				<view v-if="currentTab === 0" class="mt-20">
					<uni-list>
						<uni-list-item title="一图读懂2023年度无锡市“太湖人才计划”" note="2023-08-31">
							<template v-slot:footer>
								<image class="slot-image" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/home/news1.png" mode="widthFix"></image>
							</template>
						</uni-list-item>
						<uni-list-item title="最高500万元! 无锡市高层人才购房补贴" note="2023-08-31">
							<template v-slot:footer>
								<image class="slot-image" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/home/news1.png" mode="widthFix"></image>
							</template>
						</uni-list-item>
						<uni-list-item title="《新华日报》头版聚焦:无锡构建“四位一体”人才工作新格局" note="2023-08-31">
							<template v-slot:footer>
								<image class="slot-image" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/home/news1.png" mode="widthFix"></image>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
				<view v-if="currentTab === 1" class="mt-20">
					暂无数据
				</view>
			</view>
			<view class="no-border-card mt-20">
				<view class="header">
					<view class="title">
						精彩活动
					</view>
					<text class="action" @click.native="go2Activity">查看更多 ></text>
				</view>
					<view>
						<scroll-view class="activity-container mt-20" :scroll-x="true" >
							<ActivityCard v-for="(cd,idx) in activities" :data="cd" :class="{'ml-10' :idx>0}" :key="idx" />
							<!-- <ActivityCard class="ml-10" /> -->
						</scroll-view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '../../components/CustomNav/index.vue'
	import ActivityCard from '../../components/ActivityCard/ActivityCard.vue'
	
	export default {
		components: { CustomNav, ActivityCard },
		data() {
			return {
				navInfo: {
					bg_color: 'transparent',
					name: ''
				},
				currentTab: 0,
				tabs:[{name: '新闻动态'},{name: '公示公告'}],
				activities:[
					{
						title: '“人才夜市”火热出摊',
						address: '地点：无锡市梁溪区',
						date: '时间：2023.11.01-2023.01.23'
					},
					{
						title: '第十三届人才招聘会',
						address: '地点：无锡市梁溪区',
						date: '时间：2023.11.01-2023.01.23'
					}
				]
			}
		},
		methods: {
			changeTab(item) {
				this.currentTab = item.index
			},
			goNews() {
				uni.navigateTo({
					url: '/pages/home/news'
				})
			},
			go2Apartment() {
				uni.navigateTo({
					url: '/pages/apartment/index'
				})
			},
			go2Talent() {
				uni.navigateTo({
					url: '/pages/talent/index'
				})
			},
			go2Activity() {
				// uni.navigateTo({
				// 	url: '/pages/interactive/interactive'
				// })
				uni.switchTab({
					url: '/pages/interactive/interactive'
				})
			},
			go2Policy() {
				// uni.navigateTo({
				// 	url: '/pages/policy/policy'
				// })
				uni.switchTab({
					url: '/pages/policy/policy'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.home-container {
	min-height: 100vh;
	background-color: #F4F6F8;
	.custom-icons {
		width: 80rpx;
		height: 80rpx;
	}
	.home-container-top {
		position: relative;
		.home-container-banner {
			width: 100%;
		}
		.home-container-actions{
			background-color: #fff;
			margin: 0 auto;
			width:90%;
			// margin-top: -20px;
			// z-index: 2;
			position: absolute;
			bottom: -60px;
			left: 5%;
			.grid-item-box {
				flex: 1;
				// position: relative;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 0;
			}
			.text {
				font-size: 14px;
				margin-top: 5px;
			}
		}
	}
	.home-container-content {
		margin-top: 150rpx;
		.position-container {
			width: 100%;
			white-space: nowrap;
			.position {
				padding: 25rpx;
				border: 1px solid #E1E1E1;
				display: inline-block;
				.header {
					font-size: 32rpx;
					font-weight: 600;
					color: #292F38;
					line-height: 45rpx;
				}
				.salary {
					font-size: 28rpx;
					font-weight: 500;
					color: #0051FF;
					line-height: 40rpx;
				}
				.company {
					font-size: 24rpx;
				}
			}
		}
		.activity-container {
			width: 100%;
			white-space: nowrap;
		}
		.btn {
			padding: 20rpx;
			background-color: #F4F6F8;
			color: #0051FF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>

<style>
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 50px;
		height: 50px;
	}
	
	.slot-text {
		flex: 1;
		font-size: 32rpx;
		font-weight: 600;
		color: #292F38;
		margin-right: 10px;
	}
</style>